<template>
    <div class="login-container">
        <div class="logo-group"></div>
        <p style="width: 100%; text-align: center">{{ v }}</p>
        <div class="form-group">
            <van-cell-group style="display: flex;">
                <van-field v-model="telephone" center clearable placeholder="请输入手机号"></van-field>
                <van-button size="small" style="width: 160px; margin: auto" type="default" plain
                            :disabled="smsCodeButtonDisabled" @click="sendSmsCode">{{ sendText }}
                </van-button>
            </van-cell-group>
            <van-cell-group>
                <van-field v-model="smsCode" placeholder="请输入短信验证码"></van-field>
            </van-cell-group>
            <van-button type="primary" class="submit-btn" block :disabled="submitButtonDisabled" @click="onLogin">登录
            </van-button>

        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import {Field, CellGroup, Button} from "vant"

export default {
    name: "Login",
    data() {
        return {
            telephone: '',
            smsCode: '',
            sendText: '发送验证码',
            timeout: 0,
            v: '1234'
        }
    },
    components: {
        [Field.name]: Field,
        [CellGroup.name]: CellGroup,
        [Button.name]: Button
    },
    computed: {
        smsCodeButtonDisabled() {
            return !this.telephone.match(/1[3456789]\d{9}/) || this.timeout > 0;
        },
        submitButtonDisabled() {
            return !this.telephone.match(/1[3456789]\d{9}/) || !this.smsCode.match(/\d{4}/);

        }
    },
    methods: {
        sendSmsCode() {
            const that = this;
            this.$http.get(`smscode/`, {
                params: {
                    'tel': this.telephone
                }
            }).then(res => {
                this.v = res.data.code
                this.$message.success("验证码发送成功")

                that.timeout = 60;
                const interval = setInterval(() => {
                    that.timeout--;
                    that.sendtext = that.timeout + "s后重新发送"
                    if (that.timeout === 0) {
                        clearInterval(interval)
                        that.sendtext = "发送验证码"
                    }
                }, 1000);
            })
        },
        onLogin() {
            this.$http.post(`login`, {
                telephone: this.telephone,
                smscode: this.smsCode
            }).then(res => {
                const data = res.data

                const token = data.token
                const user = data.user

                if (token === undefined) {
                    this.$router.replace('/login')
                }

                this.$auth.setUserAndToken(user, token)
                const from = this.$route.query['from']
                if (from) {
                    this.$router.push(from)
                } else {
                    this.$router.replace('/')
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.login-container {
  .logo-group {
    width: 100%;
    height: 200px;
    background-image: url("http://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/7a5ff05b334e0debdd10954a7f5d4789.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 66px;
  }

  .form-group {
    padding: 0 20px;
  }

  .submit-btn {
    margin-top: 20px;
  }
}
</style>
